<template>
	<view class="chart_box">
		<view class="chart_container">
			<view class="head">
				<image class="w-70rpx" src="@/static/ring/chart/activity.png" mode="widthFix"></image>
				<text class="title">活动</text>
			</view>
			<view class="data">
				<view v-for="item in activityData" :key="item.title" class="item">
					<image class="w-40rpx" :src="item.img" mode="widthFix"></image>
					<text class="name">{{ item.title }}：</text>
					<text class="value"
						>{{ item.value || "--" }}
						<text v-if="item.value" class="unit">{{ item.unit }}</text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import CaloriesImg from "@/static/ring/chart/Calories.png";
import StepImg from "@/static/ring/chart/step.png";
import DistanceImg from "@/static/ring/chart/distance.png";

import { queryMyStepInfoByDay } from "@/api/ring/chart.js";
import dayjs from "dayjs";
import store from "@/store/index.js";

export default {
	props: {
		date: String,
	},
	data() {
		return {
			activityData: [
				{
					img: CaloriesImg,
					title: "卡路里",
					value: "--",
					unit: "KCAL",
				},
				{
					img: StepImg,
					title: "步数",
					value: 0,
				},
				{
					img: DistanceImg,
					title: "距离",
					value: "--",
					unit: "KM",
				},
			],
		};
	},

	computed: {
		isLogin() {
			return store.state.userToken;
		},
	},

	methods: {
		getTitle() {
			return 'activity';
		},
		updateChartData(date) {
			if (!this.isLogin) return;
			date = date || this.date || dayjs().format("YYYY-MM-DD HH:mm:ss");
			queryMyStepInfoByDay({
				dateStr: dayjs(date).format("YYYY-MM-DD"),
				offsetMinutes: new Date().getTimezoneOffset(),
			})
				.then((res) => {
					console.log("queryMyStepInfoByDay", res.data);

					const calories = this.activityData[0];
					const steps = this.activityData[1];
					const distance = this.activityData[2];

					calories.value = !res.data.calSum ? 0 : res.data.calSum.toFixed(1);
					steps.value = res.data.sum || 0;
					distance.value = !res.data.distanceSum ? 0 : res.data.distanceSum.toFixed(1);
				})
				.catch((error) => console.log(error));
		},
	},
};
</script>
<style lang="scss" scoped>
.chart_box {
	width: 100%;
	height: 100%;
	color: black;

	.w-70rpx {
		width: 70rpx;
	}

	.w-40rpx {
		width: 40rpx;
	}

	.chart_container {
		padding: 20rpx 30rpx;

		.head {
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.title {
				font-size: 32rpx;
				font-weight: 500;
				text-align: left;
				margin-left: 12rpx;
			}
		}

		.data {
			margin-top: 8rpx;

			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				height: 44rpx;
				display: flex;
				align-items: center;

				.name {
					flex: 1;
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: 500;
					color: black;
				}

				.value {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;

					.unit {
						font-size: 18rpx;
					}
				}
			}
		}
	}
}
</style>
